<template>
  <div class="app-container">
    <!--高级查询-->
    <div class="filter_container">
      <div class="filter_row">
        <el-form ref="form" :model="params" :inline="true" label-width="100px" size="mini">
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="承运商名称：">
                <el-input v-model="params.carrierName"  maxlength="20" @keyup.enter.native="handleFilter" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <!--操作按钮-->
    <div class="operation_container">
      <ul>
        <li><el-button v-waves type="primary" icon="el-icon-search" size="mini" @click="handleFilter">查询</el-button></li>
        <li><el-button v-waves type="primary" icon="el-icon-circle-plus-outline" size="mini" @click="handleAdd()">新增</el-button></li>
      </ul>
    </div>
    <!--栅格-->
    <div class="grid_container">
      <el-table
        ref="singleTable"
        v-loading="grid.loading"
        :data="page.rows"
        element-loading-text="Loading"
        border
        stripe
        fit
        highlight-current-row
      >
        <el-table-column type="selection" align="center" width="40" />
        <el-table-column align="center" label="序" width="50">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
       <el-table-column prop="carrierName" label="承运商名称" align="center" show-overflow-tooltip width="200">
          <template slot-scope="scope">
                <el-button type="text" @click="handleRowClick(scope.row)">
                  {{ scope.row.carrierName }}
                </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="warehouseName" label="目的仓库" align="center" show-overflow-tooltip />
        <!-- <el-table-column prop="address" label="地址" align="center" show-overflow-tooltip /> -->
        <!-- <el-table-column prop="contact" label="联系人" align="center" show-overflow-tooltip /> -->
        <!-- <el-table-column prop="contactMobile" label="联系人电话" align="center" show-overflow-tooltip /> -->
        <el-table-column label="操作" align="center" fixed="right" width="200">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" icon="el-icon-delete" @click="handleRemove(scope.row)">删除</el-button>
            <!-- <el-button v-if="scope.row.status === 'pending'" @click="handleChangeStatus(scope.row.id, true,'passed')"  >通过</el-button>
            <el-button v-if="scope.row.status === 'pending'" @click="handleChangeStatus(scope.row.id,false,'unpassed')"  >拒绝</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--分页-->
    <div>
      <el-pagination
        v-show="page.total > 0"
        :current-page="page.currentPage"
        :page-sizes="page.pageSizes"
        :page-size="page.pageSize"
        :total="page.total"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 添加/修改对话框 -->
    <el-dialog :title="carrierListFormDialog.title" :visible.sync="carrierListFormDialog.visible" :close-on-click-modal="false" :before-close="resetCarrierListFormDialog" width="500px" append-to-body>
      <el-form ref="carrierListForm" :model="optionFormData" :rules="carrierListFormRules" label-width="100px">
        <el-form-item label="选择承运商" prop="carrierNo">
        	<el-select v-model="optionFormData.carrierNo" :filter-method="filterForwardingAgent"
        		prop="carrierNo" placeholder="请选择" filterable clearable style="width: 100%;">
        		<el-option v-for="option in forwardingAgentOptions" :key="option.id" :label="option.carrierName"
        			:value="option.id" />
        	</el-select>
        </el-form-item>
        <!-- {{optionFormData.carrierNo}} -->
        <el-form-item label="目的仓库" prop="warehouseId">
        	<el-select v-model="optionFormData.warehouseId"
        		:filter-method="filterWarehouseMethod" prop="warehouseId" placeholder="请选择" filterable
        		clearable style="width: 100%;">
        		<el-option v-for="option in warehouseOptions" :key="option.id" :label="option.warehouserName"
        			:value="option.id" />
        	</el-select>
        </el-form-item>
        <!-- {{optionFormData.warehouseId}} -->

        <!-- <el-form-item label="承运商名称：">
          <el-input v-model="carrierListFormData.carrierName" placeholder="请输入承运商名称" />
        </el-form-item>
        <el-form-item label="目的地：">
          <el-input v-model="carrierListFormData.address" placeholder="请输入地址" />
        </el-form-item>
        <el-form-item label="联系人：">
          <el-input v-model="carrierListFormData.contact" placeholder="请输入联系人" />
        </el-form-item>
        <el-form-item label="联系人电话：">
          <el-input v-model="carrierListFormData.contactMobile" placeholder="请输入联系人电话" />
        </el-form-item> -->
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmCarrierListFormDialog">确 定</el-button>
        <el-button @click="resetCarrierListFormDialog">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 详情页面  -->
    <!-- <carrier-detail v-if="rowId && detailVisible" :id="rowId" class="detail-view" @close="handleDetailClose" @callback="handleQuery"  /> -->
  </div>
</template>

<script>
import ListMixin from '@/mixins/List'
import waves from '@/directive/waves'
import appConfig from '@/config/AppConfig'
import appConstant from '@/constant/AppConstant'
import CarrierApi from '@/api/basic/CarrierApi' // 选择承运商 接口文件
import WarehouseApi from '@/api/basic/WarehouseApi'  // 选择仓库 接口文件
import TFoTransitRouteApi from '@/api/transitRoute/TFoTransitRouteApi'
// import CarrierDetail from './CarrierDetail.vue'

export default {
  directives: {
    waves
  },
  components: {
    // CarrierDetail   // 目前wms没有这个页面
  },
  mixins: [ListMixin],
  data() {
    return {
      forwardingAgentOptions: [], // 承运商选项
      warehouseOptions: [], // 目的仓库选项
      optionFormData: {
        carrierNo: null,  // 承运商id
        carrierName: null,  // 承运商名称
        warehouseId: null,  // 目的仓库id
        warehouseName: null,  // 目的仓库名称
        routeType: 'carrierType', // 运输类型
        isValid: '1'
      },

      carrierListFormData: {
        carrierName: null,  // 承运商
        address: null,  // 地址
        contact: null,  // 联系人
        contactMobile: null,  // 联系人电话
      },
      carrierListFormDialog: {
        title: '',
        visible: false
      },
      selects: {
        validStatusList: appConstant.validStatusList
      },
      params: {
        carrierName: '',  // 承运商名称
        // warehouseName: '',  // 目的仓库名称
        routeType: 'carrierType'
      },
      page: {
        currentPage: appConfig.page.currentPage,
        pageSize: appConfig.page.pageSize,
        pageSizes: appConfig.page.pageSizes,
        total: null,
        rows: null
      },
      rowId: null,
      detailVisible: null,
      grid: {
        loading: true
      },
      carrierListFormRules: {},
    }
  },
  created() {
    this.loadData()
    this.loadOptions()
  },
  methods: {
    loadOptions() {
      CarrierApi.list().then(res => { // 选择承运商的赋值   carrierName
      	console.log(res);
      	// this.forwardingAgentSelect = res
      	// this.forwardingAgentOptions = res.slice(0, 100)
        this.forwardingAgentOptions = res
      })
      WarehouseApi.list(
      // {warehouseTypeList: ['leasing']}
      ).then(res => { // 目的仓库的赋值
      console.log(res.data);
      	// this.warehouseSelect = res.data
      	// this.warehouseOptions = res.data.slice(0, 100)
        this.warehouseOptions = res.data
      })

    	// let that = this;
    	// TViVehicleModelApi.list().then(res => {
    	// 	that.options.vehicleModels = res.data
    	// })
    	// WarehouseApi.list().then(response => {
    	// 	that.options.warehouseCodes = response.data
    	// })
    	// DriverApi.list().then(res => { // 选择司机的赋值
    	// 	console.log(res.data);
    	// 	this.driverSelect = res.data
    	// 	this.driverOptions = res.data.slice(0, 100)
    	// })
    	// CustomerApi.list().then(res => {
    	// 	that.options.customerOptions = res.data
    	// })
    },
    confirmCarrierListFormDialog() {
      const carrierNameArr = this.forwardingAgentOptions.filter(item => item.id==this.optionFormData.carrierNo)
      const warehouseNameArr = this.warehouseOptions.filter(item => item.id==this.optionFormData.warehouseId)
      this.optionFormData.carrierName = carrierNameArr[0].carrierName
      this.optionFormData.warehouseName = warehouseNameArr[0].warehouserName
      console.log(this.optionFormData);

      if(this.carrierListFormDialog.title === '新增') {
        TFoTransitRouteApi.add(this.optionFormData).then(response => {
          this.$message.success('新增成功！')
          this.resetCarrierListFormDialog()
        })
      }else if(this.carrierListFormDialog.title === '编辑') {
        TFoTransitRouteApi.edit(this.optionFormData).then(response => {
          this.$message.success('编辑成功！')
          this.resetCarrierListFormDialog()
        })
      }

      // console.log(this.carrierListFormDialog.title);
      // if (this.carrierListFormDialog.title === '新增') {
      //   CarrierApi.add(this.carrierListFormData).then(response => {
      //     this.$message.success('新增成功！')
      //     this.resetCarrierListFormDialog()
      //     this.loadData()
      //   })
      // } else if (this.carrierListFormDialog.title === '编辑') {
      //   CarrierApi.edit(this.carrierListFormData).then(response => {
      //     this.$message.success('编辑成功！')
      //     this.resetCarrierListFormDialog()
      //     this.loadData()
      //   })
      // }
    },
    resetCarrierListFormDialog() {
      this.carrierListFormDialog={
        title: '',
        visible: false
      }
      this.optionFormData = {
        carrierNo: null,  // 承运商id
        carrierName: null,  // 承运商名称
        warehouseId: null,  // 目的仓库id
        warehouseName: null,  // 目的仓库名称
        routeType: 'carrierType', // 运输类型
        isValid: '1'
      }
      this.loadData()
      this.loadOptions()
    },
    handleAdd() {
      // this.$router.push({ path: '/basic/carrier/form' })
      this.carrierListFormDialog={
        title: '新增',
        visible: true
      }
    },
    handleEdit(row) {
      // this.$router.push({ path: '/basic/carrier/form/' + row.id })
      this.carrierListFormDialog={
        title: '编辑',
        visible: true
      }
      this.optionFormData = {
        id: row.id,
        carrierNo: row.carrierNo,  // 承运商id
        carrierName: row.carrierName,  // 承运商名称
        warehouseId: row.warehouseId,  // 目的仓库id
        warehouseName: row.warehouseName,  // 目的仓库名称
        routeType: 'carrierType', // 运输类型
        isValid: '1'
      }
      // this.carrierListFormData={
      //   id: row.id,
      //   carrierName: row.carrierName,  // 承运商
      //   address: row.address,  // 地址
      //   contact: row.contact,  // 联系人
      //   contactMobile: row.contactMobile,  // 联系人电话
      // }
      console.log(this.carrierListFormData);
    },
    handleRemove(row) {
      this.$confirm('确定删除当前数据吗？', '确定删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        TFoTransitRouteApi.remove(row.id).then(response => {
          this.$message.success('删除成功')
          this.loadData()
        })
      }).catch(() => {
        this.$message.info('已取消')
      })
    },

    loadData() {
      // 加载grid数据
      this.grid.loading = true
      TFoTransitRouteApi.page(this.params, this.page).then(response => {
        console.log(response.data);
        this.page.total = response.data.total
        // this.page.rows = response.data.rows
        this.page.rows = response.data.records
        this.grid.loading = false
      }, () => {
        this.grid.loading = false
      })
    },

    handleFilter() {
      this.page.currentPage = appConfig.page.currentPage
      this.loadData()
    },
    handleSizeChange(pageSize) {
      this.page.pageSize = pageSize
      this.loadData()
    },
    handleCurrentChange(currentPage) {
      this.page.currentPage = currentPage
      this.loadData()
    },
    handleRowClick(row) {
      this.rowId = row.id
      this.detailVisible = true
    },
    handleChangeStatus(id, actived, status) {
      const param = {
        id: id,
        active: actived,
        status: status
      }
      CarrierApi.changeStatus(param).then(response => {
        this.loadData()
      }, () => {
        this.grid.loading = false
      })
    },
    filterForwardingAgent(){},
    filterWarehouseMethod(){}

  }
}
</script>
